<template>
  <div id="container">
    <el-row>
      <el-col :xs="0" :sm="4" :md="4" :lg="4" :xl="6">&nbsp;</el-col>
      <el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="12">
        <div id="blog">
          <div id="tags">
            <div id="tagList">
              <span v-for="(tag) in article['tag_list']" :key="tag" class="bg"><span>{{ tag }}</span></span>
            </div>
            <div style="padding: 1rem">
              <el-tag type="" effect="plain">{{ article["class_name"] }}</el-tag>
            </div>
          </div>
          <div id="header">
            <h2 style="text-align: center">{{ article.title }}</h2>
            <div id="banner" style="text-align: center">
              <span style="color: #409EFF"><i class="el-icon-user" /> {{ author }}</span>
              <span style="color: #F56C6C"><i class="el-icon-date" /> {{ article["created_at"] }}</span>
              <span style="color: #e6a23c"><i class="el-icon-view" /> {{ article["page_view"] }}</span>
              <span style="color: #00c4b6"><i class="iconfont">&#xe677;</i> {{ article["page_view"] }}</span>
            </div>
          </div>
          <el-divider />
          <el-row>
            <el-col :xs="1" :sm="2" :md="2" :lg="2" :xl="2">&nbsp;</el-col>
            <el-col :xs="22" :sm="20" :md="20" :lg="20" :xl="20">
              <div id="editor" />
            </el-col>
            <el-col :xs="1" :sm="2" :md="2" :lg="2" :xl="2">&nbsp;</el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :xs="0" :sm="4" :md="4" :lg="4" :xl="6">&nbsp;</el-col>
    </el-row>
    <el-backtop :bottom="100">
      <div class="backTop"><i class="el-icon-top" /></div>
    </el-backtop>
  </div>
</template>

<script>
import '@/assets/font/font_3402031_oui3hqletr/iconfont.css'
import { getArticleByID } from '@/api/article'
import '@/assets/css/blog_viewer.css'
import 'prismjs/themes/prism.css'
import Editor from '@toast-ui/editor'
import codeSyntaxHighlight
from '@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight-all.js'

export default {
  name: 'Article',
  components: {},
  data() {
    return {
      articleId: 0,
      author: 'lishuangzhi',
      article: {},
      viewerText: ''
    }
  },
  computed: {},
  async created() {
    const articleId = this.$route.params['articleId']
    this.articleId = articleId
    const res = await getArticleByID(articleId)
    this.article = res.data['article']
    this.viewerText = this.article.content
    Editor.factory({
      el: document.getElementById('editor'),
      previewStyle: 'vertical',
      height: '500px',
      initialValue: this.viewerText,
      plugins: [codeSyntaxHighlight],
      viewer: true
    })
  },
  methods: {}
}
</script>

<style scoped>

#blog {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  min-height: 900px;
  padding-bottom: 3rem;
  background-color: white;
}

.firstLine {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1rem;
  padding-right: 1rem;
}

#banner {
  color: grey;
}

#banner > span {
  padding-right: 1rem;
  text-align: center;
}

#header {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

#editor {
  font-family: serif;
}

#tags {
  display: flex;
  justify-content: space-between;
}

#tagList {
  padding: 1rem;
}

.backTop {
  height: 100%;
  width: 100%;
  background-color: #f2f5f6;
  box-shadow: 0 0 6px rgba(0, 0, 0, .12);
  text-align: center;
  line-height: 40px;
  color: #1989fa;
}

.bg {
  line-height: 2rem;
  background: #E6A23C;
  background: linear-gradient(120deg, transparent 25px, #E6A23C 0) bottom left,
  linear-gradient(60deg, transparent 25px, #E6A23C 0) top left;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  text-align: center;
  font-size: 14px;
  margin-bottom: 1rem;
  padding-left: 1.2rem;
  padding-right: .5rem;
}

.bg span {
  margin-left: 10px;
  color: #FFF;
}
</style>
